<script setup>
import { useRouter } from 'vue-router';
import { getbanner2 } from '../../api/home'
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';


const router = useRouter()
const banner2 = ref([])
const activeNames = ref(0)

function onClickLeft() {
    router.back()

}
getbanner2().then(res => {
    console.log(res.data.data);
    banner2.value = res.data.data
})
function add1() {
    showSuccessToast('预约成功')
    router.push('confirm')
}
</script>


<template>
    <van-nav-bar title="摩天轮" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="box">
        <div class="box2">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item v-for="item in banner2" :key="item.id">
                    <van-image :src=item.img />
                </van-swipe-item>
            </van-swipe>

            <h3>摩天轮</h3>

            <van-cell-group>
                <van-cell title="时间：" value="13:00--20:00开放" />
                <van-cell title="热线：" value="12345" />
                <van-cell title="位置：" value="娱乐区13N" />
            </van-cell-group>

            <h3>服务限制</h3>
            <van-cell-group>
                <van-cell title="12+    年龄限制：" value="该服务仅限12岁以上年龄玩" />
                <van-cell title="禁止  禁止说明：" value="禁止携带食品、饮品游玩" />
            </van-cell-group>
            <h3>服务介绍</h3>
            <van-collapse v-model="activeNames" :accordion="true">
                <van-collapse-item title="介绍" name="1">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摩天轮是一种大型转轮状的机械建筑设施，上面挂在轮边缘的是供乘客乘搭的座舱(Gondola)。
                    乘客坐在摩天轮慢慢的往上转,可以从高处俯瞰四周景色。最常见的摩天轮一般出现在游乐园(或主题公园)与园游会里,
                    作为一种游乐场机动游戏,与云霄飞车、旋转木马合称是“乐园三宝”。但摩天轮也经常单独存在于其他的场合,通常作为活动的观景台使用。
                    分类根据运作机构的差异,摩天轮可分为重力式摩天轮(Ferris Wheel)、无辐式摩天轮和观景摩天轮
                </van-collapse-item>

            </van-collapse>
            <van-button type="success" @click="add1">点击预约</van-button>
        </div>
    </div>
</template>

<style scoped>
html,
body,
.box {
    width: 100%;
    height: 100%;
}

h3 {
    width: 100%;
    text-align: center;
}

.van-button {
    width: 30%;
    margin-left: 35%;
}
</style>